<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>任务管理器</title>
    <link rel="stylesheet" href="${request.contextPath}/layuiadmin/layui/css/layui.css" media="all">
</head>
<script src="${request.contextPath}/lib/jquery.js"></script>
<script src="${request.contextPath}/lib/echarts.js"></script>

<body style="background-color: #F2F2F2;">
<div style="padding: 20px">
    <div class="layui-card">
        <div class="layui-card-body" style="text-align: center;font-size: 20px;font-weight: bold">
                当前服务器状态
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">cpu占用率</div>
                <div class="layui-card-body">
                    <div id="cpu" style="height: 400px"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">内存占用</div>
                <div class="layui-card-body">
                    <div id="memory" style="height: 400px"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">硬盘占用</div>
                <div class="layui-card-body">
                    <div id="storage" style="height: 400px"></div>
                </div>
            </div>
        </div>

    </div>
<#--    cpu信息-->
<#--    <table class="layui-table" >-->
<#--        <colgroup>-->
<#--            &lt;#&ndash;        <col width="150">&ndash;&gt;-->
<#--            &lt;#&ndash;        <col width="200">&ndash;&gt;-->
<#--            &lt;#&ndash;        <col>&ndash;&gt;-->
<#--        </colgroup>-->
<#--        <thead>-->
<#--        <tr>-->
<#--            <th>名称</th>-->
<#--            <th>CPU用户使用率</th>-->
<#--            <th>CPU系统使用率</th>-->
<#--            <th>CPU总的使用率</th>-->
<#--        </tr>-->
<#--        </thead>-->
<#--        <tbody>-->
<#--        <tr>-->
<#--            <td>cpu1</td>-->
<#--            <td>39.4%</td>-->
<#--            <td>60.5%</td>-->
<#--            <td>100.0%</td>-->
<#--        </tr>-->
<#--        <tr>-->
<#--            <td>cpu2</td>-->
<#--            <td>30.2%</td>-->
<#--            <td>57.5%</td>-->
<#--            <td>87.7%</td>-->
<#--        </tr>-->
<#--        </tbody>-->
<#--    </table>-->
<#--    内存信息-->
<#--    <table class="layui-table">-->
<#--        <colgroup>-->
<#--            &lt;#&ndash;        <col width="150">&ndash;&gt;-->
<#--            &lt;#&ndash;        <col width="200">&ndash;&gt;-->
<#--            &lt;#&ndash;        <col>&ndash;&gt;-->
<#--        </colgroup>-->
<#--        <thead>-->
<#--        <tr>-->
<#--            <th>内存总量</th>-->
<#--            <th>当前内存使用量</th>-->
<#--            <th>当前内存剩余量</th>-->

<#--        </tr>-->
<#--        </thead>-->
<#--        <tbody>-->
<#--        <tr>-->
<#--            <td>16663124K</td>-->
<#--            <td>11492580K</td>-->
<#--            <td>5170544K</td>-->
<#--        </tr>-->

<#--        </tbody>-->
<#--    </table>-->
    <div class="layui-card" style="margin-top: 20px">
        <div class="layui-card-header">进程信息</div>
        <div class="layui-card-body">
            <table class="layui-table">
                <colgroup>
                    <#--        <col width="150">-->
                    <#--        <col width="200">-->
                    <#--        <col>-->
                </colgroup>
                <thead>
                <tr>
                    <th>pid</th>
                    <th>名称</th>
                    <th>内存占用</th>
                </tr>
                </thead>
                <tbody id="process">

                </tbody>
            </table>
        </div>
    </div>


</div>
<script>

    $(function (){
        var socket;
        var cpuUsage;
        var memoryUsage;
        var storageUsage;
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else{
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            //等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
            //var socketUrl="${request.contextPath}/im/"+$("#userId").val();
            var socketUrl="http://localhost:8080/imserver/"+$("#userId").val();
            socketUrl=socketUrl.replace("https","ws").replace("http","ws");
            console.log(socketUrl);
            if(socket!=null){
                socket.close();
                socket=null;
            }
            socket = new WebSocket("ws://localhost:8080/webSocketServer/1");
            //打开事件
            socket.onopen = function() {
                console.log("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function(msg) {
                var data=JSON.parse(msg.data);
                cpuUsage=data.cpuUsage;
                memoryUsage=data.memoryUsage;
                storageUsage=data.storageUsage;
                var cpu = document.getElementById("cpu");
                var cpuChart = echarts.init(cpu);
                var app = {};
                var cpuOption;

                cpuOption = {
                    tooltip: {
                        formatter: '{a} <br/>{b} : {c}%'
                    },
                    series: [{
                        name: 'Pressure',
                        type: 'gauge',
                        progress: {
                            show: true
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value}'
                        },
                        data: [{
                            value:cpuUsage,
                            name: 'cpu'
                        }]
                    }]
                };

                if (cpuOption && typeof cpuOption === 'object') {
                    cpuChart.setOption(cpuOption);
                }

                var memory = document.getElementById("memory");
                var memoryChart = echarts.init(memory);
                var app = {};
                var memoryOption;

                memoryOption = {
                    tooltip: {
                        formatter: '{a} <br/>{b} : {c}%'
                    },
                    series: [{
                        name: 'Pressure',
                        type: 'gauge',
                        progress: {
                            show: true
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value}'
                        },
                        data: [{
                            value:memoryUsage,
                            name: 'memory'
                        }]
                    }]
                };

                if (memoryOption && typeof memoryOption === 'object') {
                    memoryChart.setOption(memoryOption);
                }



                var storage = document.getElementById("storage");
                var storageChart = echarts.init(storage);
                var app = {};
                var storageOption;

                storageOption = {
                    tooltip: {
                        formatter: '{a} <br/>{b} : {c}%'
                    },
                    series: [{
                        name: 'Pressure',
                        type: 'gauge',
                        progress: {
                            show: true
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value}'
                        },
                        data: [{
                            value: storageUsage,
                            name: 'storage'
                        }]
                    }]
                };

                if (storageOption && typeof storageOption === 'object') {
                    storageChart.setOption(storageOption);
                }


                //发现消息进入    开始处理前端触发逻辑

                //渲染进程表
                var processTbody=$("#process");
                processTbody.html("");
                for(var i=0;i<data.process.length;i++){
                    var process=data.process[i];
                    $(processTbody).append('<tr><td>'+process.pid+'</td><td>'+process.name+'</td><td>'+process.memUse+'</td></tr>');
                }

            };
            //关闭事件
            socket.onclose = function() {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                console.log("websocket发生了错误");
            }
        }


    })
    // function sendMessage() {
    //     if(typeof(WebSocket) == "undefined") {
    //         console.log("您的浏览器不支持WebSocket");
    //     }else {
    //         console.log("您的浏览器支持WebSocket");
    //         console.log('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
    //         socket.send('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
    //     }
    // }
</script>

</body>

</html>
